import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Popular from '@/pages/home/popular';
import Trending from '@/pages/home/trending';
import Favorite from '@/pages/home/favorite';
import MyInfo from '@/pages/home/myInfo';
import {useThemeStore} from '@/store';

export type BottomTabParamList = {
  Popular: undefined;
  Trending: undefined;
  Favorite: undefined;
  MyInfo: undefined;
};

const Tab = createBottomTabNavigator<BottomTabParamList>();

const HomeNavigator = () => {
  const {primaryColor} = useThemeStore();

  return (
    <Tab.Navigator
      initialRouteName="Popular"
      screenOptions={{
        tabBarActiveTintColor: primaryColor,
      }}>
      <Tab.Screen
        name="Popular"
        component={Popular}
        options={() => ({
          tabBarLabel: '最热',
          headerShown: false,
          tabBarIcon(props) {
            return (
              <MaterialIcons
                name="whatshot"
                size={26}
                style={{color: props.color}}
              />
            );
          },
        })}
      />
      <Tab.Screen
        name="Trending"
        component={Trending}
        options={() => ({
          tabBarLabel: '趋势',
          headerShown: false,
          tabBarIcon(props) {
            return (
              <MaterialIcons
                name="moving"
                size={26}
                style={{color: props.color}}
              />
            );
          },
        })}
      />
      <Tab.Screen
        name="Favorite"
        component={Favorite}
        options={() => ({
          tabBarLabel: '收藏',
          headerShown: false,
          tabBarIcon(props) {
            return (
              <MaterialIcons
                name="favorite"
                size={26}
                style={{color: props.color}}
              />
            );
          },
        })}
      />
      <Tab.Screen
        name="MyInfo"
        component={MyInfo}
        options={() => ({
          tabBarLabel: '我的',
          title: '我的',
          tabBarIcon(props) {
            return (
              <MaterialIcons
                name="person-outline"
                size={26}
                style={{color: props.color}}
              />
            );
          },
        })}
      />
    </Tab.Navigator>
  );
};

export default HomeNavigator;
